<template>
  <div>
    <full-page :options="options" ref="fullpage" class="fullpage">
      <div class="section section_1 rel" id="section_1">
        <div class="section_1_container">
          <div :style="`background-image:url(${require('../img/home_page.jpg')});`"  class="bg-section section_1_logo" alt=""></div>
          <div class="section_1_content">
            <p>专业区块链技术</p>
            <p>开发服务商</p>
          </div>
          <span class="section_1_contentE">Professional Blockchain Technology Development Service Provider</span>
        </div>
        <div class="w35 h35 absc" @click="mounseDown"  >
          <img src="../img/downArrow.png"/>
        </div>
      </div>
      <div class="section section_2" id="section_2" >
        <div class="section_2_content">
          <div class="section_2_top">
            <img class="top_2_content1" src="../img/home_page_2/icon-xiaosanjiao.png" alt="" >
            <div class="top_2_content2">
              <div class="top_2_animate">
                <img src="../img/home_page_2/icon-1.0.png" alt="">
                <h3>1.0时代</h3>
              </div>
            </div>
            <div class="top_2_content3" style="display:none">
              <h1>应用于股票、债券、年金、私募股权、众筹、金融衍生品等金融交易领域</h1>
              <img src="../img/home_page_2/icon-dianzhuifan.png" alt="">
              <h2>可编程金融</h2>
            </div>
            <div class="top_2_content4">
              <div class='top_2_animate'>
                <img src="../img/home_page_2/icon-1.0.png" alt="">
                <h3>3.0时代</h3>
              </div>
            </div>
            <img class="top_2_content5" src="../img/home_page_2/icon-xiaosanjiao.png" alt="">
          </div>
          <img class="section_2_image" src="../img/home_page_2/icon-xiantiao.png" alt="">
          <div class="section_2_bottom">
            <img class="bottom_2_content1" src="../img/home_page_2/icon-zhongsanjiao.png" alt="">
            <div class="bottom_2_content2"  style="display:none">
              <h1>可编程货币</h1>
              <img src="../img/home_page_2/icon-dianzhui.png" alt="">
              <h2>应用于数字货币及支付领域</h2>
            </div>
            <div class="bottom_2_content3" style="opacity:0">
              <div class="bottom_2_animate">
                <img src="../img/home_page_2/icon-2.0.png" alt="">
                <h3>2.0时代</h3>
              </div>
            </div>
            <div class="bottom_2_content4"  style="display:none">
              <h1>可编程社会</h1>
              <img src="../img/home_page_2/icon-dianzhui.png" alt="">
              <h2>应用于公证、仲裁、博彩、投票、医疗、农业、教育等社会生活领域</h2>
            </div>
            <img class="bottom_2_content5" src="../img/home_page_2/icon-zhongsanjiao.png" alt="">
          </div>
        </div>
      </div>
      <div class="section section_3" id="section_3">
        <div class="seciton_3_content">
          <h1 id="section_3_title" style="display:none">行业资讯</h1>
          <img id="section_3_image" style="display:none" src="../img/home_page_3/hangyezixun-fengexian.png" alt="">
          <p id="section_3_text">录价值转移（交易）的全过程。在“互联网 +”时代，“资源数字化”已逐步实现，但是数字资源确权的问题没有完全解决。例如，在司法上电子证据的证明力较弱，并且证据的鉴定也非常复杂；大量的权益性文件还是需要以纸质来保存以防止篡改和防止丢失。“数字权属”的缺位阻碍了数字资源向数字资产的转变，也严重影响了数字经济的交易效率……</p>
          <!-- <input type="button" value="查看详情"> -->
          <a href="#" id="section_3_button" style="display:none">
            <img src="../img/home_page_3/icon-anniu.png" alt="">
            <span>查看详情</span>
          </a>
        </div>
      </div>
      <div class="section section_4" id="section_4">
        <div class="seciton_4_content">
          <ul class="section_4_bgc">
            <img class="seciton_4_img" src="../img/home_page_4/icon-wangge.png" alt="">
            <li>
              <a href="#">
                <span>01</span>
              </a>
            </li>
            <li><a href="#">
              <span>02</span>
              </a>
            </li>
            <li><a href="#"><span>03</span></a></li>
            <li><a href="#"><span>04</span></a></li>
            <li><a href="#"><span>05</span></a></li>
            <li><a href="#"><span>06</span></a></li>
            <h3>公链开发</h3>
            <h3>区块链溯源系统</h3>
            <h3>交易系统</h3>
            <h3>区块链浏览器</h3>
            <h3>快照下载</h3>
            <h3>钱包服务</h3>
            <h3>智能合约和DAPP</h3>
          </ul>
        </div>
      </div>
      <div class="section section_5" id="section_5">
        <div class="seciton_5_content">
          <h1 class="section_5_title" style="display:none">公司简介</h1>
          <img class="section_5_image"  style="display:none" src="../img/home_page_5/gongsijianjie-fengexian.png" alt="">
          <div class="section_5_text"  style="display:none">
            <p>深圳市小蚂蚁区块链技术有限公司是专业提供区块链技术开发服务，一直致力于为政府、企业、用户打造区块链技术实际落地应用。产品包含区块链主链开发、数字货币交易系统、区块链钱包、区块链浏览器、DAPP等多个领域。</p>
            <p>不积跬步，无以至千里。多年的技术沉淀和创新，我们拥有多款区块链成熟产品，为全球客户提供安全、可靠、稳定有保障的一站式区块链开发服务......</p>
          </div>
          <a class="section_5_btn">
            <img src="../img/home_page_5/icon-anniu.png" alt="">
            <span>查看详情</span>
          </a>
          <img src="../img/home_page_5/gongsijianjie-diqiu.png" alt="">
        </div>
      </div>
      <div class="section section_6" id="section_6">
        <div class="seciton_6_content">
          <h1 id="section_6_title">文档中心</h1>
          <img id="section_6_image" src="../img/home_page_6/gongsijianjie-fengexian.png" alt="">
          <p id="section_6_text">深圳市小蚂蚁区块链技术有限公司是专业提供区块链技术开发服务，一直致力于为政府、企业、用户打造区块链技术实际落地应用。产品包含区块链主链开发、数字货币交易系统、区块链钱包、区块链浏览器、DAPP等多个领域......</p>
          <div class="section_icon_01 section_icon" style="display:none">
            <img src="../img/home_page_6/wendang-kaiyuandaima.png" alt="">
            <span>开源代码</span>
          </div>
          <div class="section_icon_02 section_icon"  style="display:none">
            <img src="../img/home_page_6/wendang-jishujiaoliu.png" alt="">
            <span>技术交流</span>
          </div>
          <div class="section_icon_03 section_icon"  style="display:none">
            <img src="../img/home_page_6/wendang-kaifagongjv.png" alt="">
            <span>开发工具</span>
          </div>
          <div class="section_icon_04 section_icon"  style="display:none">
            <img src="../img/home_page_6/wendang-pingtaijieru.png" alt="">
            <span>合约开放平台接入</span>
          </div>
        </div>
      </div>
      <div class="section section_7">
        <div class="seciton_7_content">
          <div class="section_7_site">
            <img src="../img/home_page_7/icon-dizhi.png" alt="">
            <h2>公司地址</h2>
            <p>广东省深圳市福田区深圳文化创意园H馆116-119</p>
          </div>
        </div>
        <div class="footer_content">
          <ul class="footer_menu">
            <li>
              <h1>业务联系</h1>
              <p>TEL:0755-2423943</p>
            </li>
            <li>
              <h1>商务合作</h1>
              <p>TEL:0755-2423943</p>
            </li>
            <li>
              <h1>公司邮箱</h1>
              <p>2423943@qq.com</p>
            </li>
            <li>
              <h1>客户服务</h1>
              <p>TEL:0755-2398129</p>
            </li>
          </ul>
          <div class="footer_copyright">
            <p>Copyright ©2019 All right reserved 小蚂蚁区块链技术有限公司</p>
          </div>
        </div>
      </div>
    </full-page>
  </div>
</template>

<script>
  import '../../public/css/fullpage.min.css'
  export default {
    name: 'home',
    data () {
      return {
        // cur:0,
        // section_1_content:false,
        options: {
            // licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
            slidesNavigation:true,
            controlArrows: true,
            scrollBar: true,
            autoScrolling:false,
            navigation: true,
            // sectionsColor: ['#2C2D2F','#2C2D2F','#2C2D2F','#2C2D2F','#2C2D2F','#2C2D2F','#2C2D2F'],
            navigationTooltips:['首页','技术变迁','行业资讯','产品服务','关于我们','文档中心','联系我们'],
            // scrollingSpeed:50000, //单页滚动速度
            loopTop:false,//滚动到顶部向上滚动到底部
            loopBottom:false,//滚动到底部连续滚动到顶部
            verticalCentered: false, //水平垂直居中
            onLeave:this.onLeave,
            licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
            afterLoad: this.afterLoad,
            onLeave:this.onLeave,
            // afterResize:this.afterResize
            // scrollBar:true,
        }
      }
    },
    beforeRouteEnter(to, from, next) {
    next((vm) => { // 参数vm就是当前组件的实例。
      
      vm.$store.dispatch("isShowNav", true);
      
    })
    },
    mounted(){
      // 初始化分页菜单
      $('#fp-nav').hide()
      // const s = document.createElement('script')
      // s.type = 'text/javascript'
      // s.src = require ('../assets/js1/canvas')
      // document.body.appendChild(s);
    },
    methods:{
      mounseDown() {
        this.$refs.fullpage.api.moveSectionDown()
      },
      moveSectionUp() {
        this.$refs.fullpage.api.moveSectionUp()
      },
      afterLoad(anchorLink, index) {
        this.$store.commit('setFullpage', this.$refs.fullpage)
        if(index.index === 0){
          $('#section_1').find('.section_1_content').show().animate({'left':'18.75%'},600)
          $('#section_1').find('.section_1_contentE').show().animate({'left':'18.75%'},600)
        } else if(index.index === 1){
         $('#section_2').find('.top_2_content2').css({'opacity':'1'}).animate({'top':'43px'},600)
         $('#section_2').find('.top_2_content4').css('opacity','1').animate({'top':'43px'},600)
         $('#section_2').find('.bottom_2_content3').css('opacity','1').animate({'top':'0'},600)
         $('#section_2').find('.top_2_content3').show().animate({'top':'0'},600)
         $('#section_2').find('.bottom_2_content2').show().animate({'top':'13px'},600)
         $('#section_2').find('.bottom_2_content4').show().animate({'top':'13px'},600)
        } else if(index.index === 2){
          $('#section_3').find('#section_3_title').show().animate({'top':'29.4%'},600)
          $('#section_3').find('#section_3_image').show().animate({'top':'35.8%'},600)
          $('#section_3').find('#section_3_text').show().stop().animate({'opacity':'1'},3000)
          $('#section_3').find('#section_3_button').show().animate({'top':'64.1%'},900)
        } else if(index.index === 3){
          console.log(444)
          let a = function(n,m,callback){
            return $('#section_4').find('.section_4_bgc li').show().eq(n).animate({'opacity':'1'},m,callback)
          }
          $('#section_4').find('.seciton_4_img').show().animate({'opacity':'1'},800,function(){
            a(0,500)
            a(1,800)
            a(2,1000)
            a(3,1200)
            a(4,1400)
            a(5,1600,)
            $('#section_4').find('h3:lt(3)').show().css('opacity','1').animate({'top':'-5.4%'},600)
            $('#section_4').find('h3').show().css('opacity','1').eq(3).animate({'bottom':'-5.4%'},600)
            $('#section_4').find('h3').show().css('opacity','1').eq(4).animate({'bottom':'-5.4%'},600)
            $('#section_4').find('h3').show().css('opacity','1').eq(5).animate({'bottom':'-5.4%'},600)
          })
        } else if(index.index === 4){
          console.log(222)
          $('#section_5').find('.section_5_title').show().animate({'left':'50%'},600)
          $('#section_5').find('.section_5_image').show().animate({'left':'50%'},600)
          $('#section_5').find('.section_5_text').show().animate({'left':'50%'},600)
          $('#section_5').find('.section_5_title').show().animate({'left':'50%'},600)
          $('#section_5').find('.section_5_btn').show().animate({'left':'50%'},600)
        } else if (index.index === 5){
          $('#section_6').find('#section_6_title').show().animate({'left':'57.76%'},600)
          $('#section_6').find('#section_6_image').show().animate({'left':'57.76%'},600)
          $('#section_6').find('#section_6_text').show().animate({'left':'57.76%'},600)
          $('#section_6').find('div').eq(1).show().animate({'top':'56.75%','left':'18.75%'},600)
          $('#section_6').find('div').eq(2).show().animate({'top':'49.35%','left':'28.49%'},600)
          $('#section_6').find('div').eq(3).show().animate({'top':'48.43%','left':'37.92%'},600)
          $('#section_6').find('div').eq(4).show().animate({'top':'57.5%','left':'47.4%'},600)
        }
      },
      onLeave(index,nextIndex,direction){
        if(index.index === 0){
          $('.section_1_container').find('.section_1_content').hide().animate({'left':'-22%',})
          $('.section_1_container').find('.section_1_contentE').hide().animate({'left':'-25%',})
        } else if(index.index === 1){
         $('#section_2').find('.top_2_content2').css({'opacity':'0'}).animate({'top':'-387px'})
         $('#section_2').find('.top_2_content4').css({'opacity':'0',}).animate({'top':'-387px'})
         $('#section_2').find('.bottom_2_content3').css('opacity','0').animate({'top':'470px'})
         $('#section_2').find('.top_2_content3').hide().animate({'top':'-432px'})
         $('#section_2').find('.bottom_2_content2').hide().animate({'top':'492px'})
         $('#section_2').find('.bottom_2_content4').hide().animate({'top':'492px'})
        } else if (index.index === 2){
          $('#section_3').find('#section_3_title').hide().animate({'top':'-19px'})
          $('#section_3').find('#section_3_image').hide().animate({'top':'0'})
          $('#section_3').find('#section_3_text').hide().animate({'opacity':'0'})
          $('#section_3').find('#section_3_button').hide().animate({'top':'970px'})
        } else if (index.index === 3){

          // let a = function(n,m,callback){
          //   return $('#section_4').find('.section_4_bgc li').hide().eq(n).animate({'opacity':'0'},m,callback)
          // }
          //  $('#section_4').find('.seciton_4_img').stop().hide().animate({'opacity':'0'})
          //   a(0)
          //   a(1)
          //   a(2)
          //   a(3)
          //   a(4)
          //   a(5)
          //   $('#section_4').find('h3:lt(3)').hide().css({'opacity':'0','top':'-94%'})
          //   $('#section_4').find('h3').eq(3).hide().css({'opacity':'0','bottom':'-94%'})
          //   $('#section_4').find('h3').eq(4).hide().css({'opacity':'0','bottom':'-94%'})
          //   $('#section_4').find('h3').eq(5).hide().css({'opacity':'0','bottom':'-94%'})
        } else if (index.index === 4){
          $('#section_5').find('.section_5_title').hide().animate({'left':'0%'})
          $('#section_5').find('.section_5_image').hide().animate({'left':'0%'})
          $('#section_5').find('.section_5_text').hide().animate({'left':'0%'})
          $('#section_5').find('.section_5_title').hide().animate({'left':'0%'})
          $('#section_5').find('.section_5_btn').hide().animate({'left':'0%'})
        } else if (index.index === 5){
          $('#section_6').find('#section_6_title').hide().animate({'left':'100%'})
          $('#section_6').find('#section_6_image').hide().animate({'left':'100%'})
          $('#section_6').find('#section_6_text').hide().animate({'left':'100%'})
          $('#section_6').find('div').eq(1).hide().animate({'left':'32.74%','top':'100%'})
          $('#section_6').find('div').eq(2).hide().animate({'left':'32.88%','top':'100%'})
          $('#section_6').find('div').eq(3).hide().animate({'left':'32.65%','top':'100%'})
          $('#section_6').find('div').eq(4).hide().animate({'left':'32.52%','top':'100%'})
        }
        if(nextIndex.index === 0) {
          $('#fp-nav').hide()
        } else {
           $('#fp-nav').show()
        }
        $('#fp-nav').find('ul li').eq(0).hide()
        $('#fp-nav').find('ul li').eq(nextIndex.index).siblings().children('.fp-tooltip').css('visibility','hidden')
        $('#fp-nav').find('ul li').eq(nextIndex.index).children('.fp-tooltip').css('visibility','visible')
      },
    }
  }
</script>
<style lang="less" scoped>
  // @media only screen and (max-width: 1367px) {
  //   .yemian {
  //       transform: scale(0.8);
  //       -moz-transform:scale(0.8); 
  //       -webkit-transform:scale(0.8); 
  //       -o-transform:scale(0.8); 
  //   }
  // }
  .rel {
    position: relative;
  }
  .bg-section {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .absc {
    position: fixed;
    bottom: 0;
    left: calc(50% - 17px);
    animation: mylogo .5s linear .5s infinite alternate;
    /* Firefox: */
    -moz-animation: mylogo .5s linear .5s infinite alternate;
    /* Safari 和 Chrome: */
    -webkit-animation: mylogo .5s linear .5s infinite alternate;
  }
  .abscdeee {
    position: fixed;
    top: 50px;
    left: calc(50% - 17px);
    z-index: 10;
    transform: rotate(180deg);
    animation: mylogo2 .5s linear .5s infinite alternate;
    /* Firefox: */
    -moz-animation: mylogo2 .5s linear .5s infinite alternate;
    /* Safari 和 Chrome: */
    -webkit-animation: mylogo2 .5s linear .5s infinite alternate;
  }

  @keyframes mylogo
    {
    from  {bottom: 15px;}
    to  {bottom: 0px;}
    }
    
    @-moz-keyframes mylogo /* Firefox */
    {
    from  {bottom: 15px;}
    to  {bottom: 0px;}
    }
    
    @-webkit-keyframes mylogo /* Safari 和 Chrome */
    {
    from  {bottom: 15px;}
    to  {bottom: 0px;}
    }

    


    @keyframes mylogo2
    {
    from  {top: 50px;}
    to  {top: 40px;}
    }
    
    @-moz-keyframes mylogo2 /* Firefox */
    {
    from  {bottom: 50px;}
    to  {bottom: 40px;}
    }
    
    @-webkit-keyframes mylogo2 /* Safari 和 Chrome */
    {
    from  {top: 50px;}
    to  {bottom: 40px;}
    }

  .section_1 {
  
    position: relative;
    width: 100%;
    height: 100%;
    .section_1_container{
      width: 100%;
      height: 100%;
      
      &>.section_1_logo {
        opacity: 0.5;
        width: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top:0;
        bottom: 0;
        max-height: 100%;
        max-width: 100%;
        margin: auto;
      };
      &>.section_1_content {
        position: absolute;
        // left: 18.75%;
        left: -22%;
        top:34%;
        height: 12%;
        width: 21.46%;
        &>p {
        // font-size:60px;
        font-size: 3.125vw;
        font-weight:400;
        color:rgba(255,255,255,1);
        letter-spacing: -1.5px;
        }
        &>p:nth-child(2){
          margin-top: 2.1%;
        }
      };
      &>.section_1_contentE {
        position: absolute;
        left: -25%;
        top: 51.9%;
        width: 31.04%;
        height: 1.9%;
        font-size:1.042;
        font-family:Arial;
        font-weight:400;
        color:rgba(255,255,255,1);
      }
    }
  }
  .section_2 {
      position: relative;
      width: 100%;
      height: 100%;
    .section_2_content{
      // position: relative;
      width: 100%;
      .section_2_top{
        position: absolute;
        left: 17.81%;
        bottom: 56.1%;
        // top: 27%;
        width:64.1%;
        height: 169px;
        // height: 16.9%;
        .top_2_content1 {
          // width: 5.7%;
          position: absolute;
          left: 0;
          top: 99px;
        }
        .top_2_content2 {
          width:10.58%;
          opacity: 0;
          position: absolute;
          // left: 259px;
          left: 20.88%;
          // left: 50%;
          // margin-left: -29.12%;
          top: -387px;
          &>.top_2_animate{
            position: absolute;
            left: 0;
            top: 0;
            animation: top_02_top 2s linear infinite;
            &>h3 {
            position: absolute;
            // left: 34px;
            left: 50%;
            transform: translateX(-50%);
            top: 35.38%;
            width:61px;
            height:18px;
            line-height: 18px;
            white-space: nowrap;
            font-size:0.938vw;
            font-family:Medium;
            font-weight:500;
            color:rgba(255,255,255,1);
            text-align: center;
            }
          }
        }
        .top_2_content3 {
          position: absolute;
          height: 160px;
          width: 211px;
          // left:501px;
          left:40.4%;
          // top: 0;
          top:-432px;
          &>h1 {
            width:211px;
            // width: 17.17%;
            height:48px;
            line-height: 16px;
            // font-size:14px;
            font-size: 0.729vw;
            font-family:Normal;
            font-weight:400;
            color:rgba(255,255,255,1);
            text-align: left;
          }
          &>img{
            position: absolute;
            top: 73px;
            left: 50%;
            transform: translateX(-50%);
          }
          &>h2 {
            position: absolute;
            top: 137px;
            left: 50%;
            transform: translateX(-50%);
            width:119px;
            height:23px;
            line-height: 23px;
            white-space: nowrap;
            // font-size:24px;
            font-size: 1.25vw;
            font-weight:500;
            color:rgba(255,255,255,1);
            text-align: center;
          }
        }
        .top_2_content4 {
          opacity: 0;
          position: absolute;
          // left: 840px;
          left: 67.74%;
          // top: 43px;
          top:-387px;
          &>.top_2_animate{
            position: absolute;
            left: 0;
            top: 0;
            animation: top_02_top 2s linear infinite;
            &>h3 {
            position: absolute;
            left: 34px;
            top: 46px;
            width:61px;
            height:18px;
            line-height: 18px;
            white-space: nowrap;
            // font-size:18px;
            font-size: 0.938vw;
            font-family:Medium;
            font-weight:500;
            color:rgba(255,255,255,1);
            text-align: center;
            }
          }          
          @keyframes top_02_top {     
            0% {
              top :0px;
            }
            25% {
              top: -10px
            }
            50% {
              top: -20px;
            }
            75% {
              top: -10px;
            }
            100% {
              top: 0px;
            }
          }
          @keyframes bottom_02_text {     
            0% {
              top :0px;
            }
            25% {
              top: 10px
            }
            50% {
              top: 20px;
            }
            75% {
              top: 10px;
            }
            100% {
              top: 0px;
            }
          }
        }
        .top_2_content5 {
          position: absolute;
          right: 0;
          top: 108px;
        }
      }
      .section_2_image{
        position: absolute;
        // top: 460px;
        bottom: 53.9%;
        width: 100%;
      }
      .section_2_bottom{
        position: absolute;
        width: 55.77%;
        height: 151px;
        // left: 411px;
        left: 50%;
        margin-left: -28.59%;
        // top:477px;
        top: 47.7%;
        // bottom: 36.9%;
        &>.bottom_2_content1{
          position: absolute;
          left: 0%;
          top: 4px;
        }
        &>.bottom_2_content2{
          position: absolute;
          width: 169px;
          height: 123px;
          // left: 170px;
          left: 15.55%;
          // top: 13px;
          top: 492px;
          &>h1{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width:118px;
            height:23px;
            line-height: 23px;
            // font-size:24px;
            font-size: 1.25vw;
            font-family:Medium;
            font-weight:500;
            color:rgba(255,255,255,1);
            white-space: nowrap;
            text-align: center;
          }
          &>img{
            position: absolute;
            top: 43px;
            left: 50%;
            transform: translateX(-50%);
          }
          &>h2{
            position: absolute;
            top: 109px;
            left: 50%;
            transform: translateX(-50%);
            width:169px;
            height:14px;
            line-height: 14px;
            // font-size:14px;
            font-size: 0.729vw;
            font-family:Normal;
            font-weight:400;
            color:rgba(255,255,255,1);
          }
        }
        &>.bottom_2_content3 {
          position: absolute;
          // left: 473px;
          left:43.27%;
          // top:0;
          top: 470px;
          // animation: top_02 linear infinite;
          &>.bottom_2_animate{
            position: absolute;
            top: 0;
            animation: bottom_02_text 2s linear infinite;
            &>h3 {
            position: absolute;
            left: 34px;
            top: 66px;
            width:61px;
            height:18px;
            line-height: 18px;
            white-space: nowrap;
            // font-size:18px;
            font-size: 0.938vw;
            font-family:Medium;
            font-weight:500;
            color:rgba(255,255,255,1);
            text-align: center;
            }
          }
        }
        @keyframes top_02 {     
          0% {
            top :0px;
          }
          25% {
            top: -10px
          }
          50% {
            top: -20px;
          }
          75% {
            top:-10px;
          }
          100% {
            top: 0px;
          }
        }
        &>.bottom_2_content4{
          position: absolute;
          width: 213px;
          height: 138px;
          // left: 724px;
          left:66.23%;
          // top: 13px;
          top: 492px;
          &>h1{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width:118px;
            height:23px;
            line-height: 23px;
            // font-size:24px;
            font-size: 1.25vw;
            font-family:Medium;
            font-weight:500;
            color:rgba(255,255,255,1);
            white-space: nowrap;
            text-align: center;
          }
          &>img{
            position: absolute;
            top: 43px;
            left: 50%;
            transform: translateX(-50%);
          }
          &>h2{
            position: absolute;
            top: 109px;
            left: 50%;
            transform: translateX(-50%);
            width:213px;
            height:31px;
            line-height: 15.5px;
            // font-size:14px;
            font-size: 0.729vw;
            font-family:Normal;
            font-weight:400;
            color:rgba(255,255,255,1);
          }
        }
        &>.bottom_2_content5 {
          position: absolute;
          // left: 1003px;
          left: 91.77%;
          top: 14px;
        }
      }
    }
  }
  .section_3 {
    background:url(../img/home_page_3/hangyezixun-beijingtu.png) no-repeat center;
    // background:url(../img/home_page_3/hangyezixun-beijingtu.png) no-repeat 475px 0px;
    // background-size: 969px 969px;
    background-size: contain;
    // position: relative;
    .seciton_3_content {
    position: relative;
      height: 100%;
      &>h1 {
        position: absolute;
        // top: 274px;
        top:0px;
        left: 46.04%;
        width:148px;
        // width: 7.71%;
        height:34px;
        line-height: 34px;
        // font-size:36px;
        font-size: 1.875vw;
        font-family:Medium;
        font-weight:500;
        color:rgba(254,254,254,1);
      }
      &>img{
        position: absolute;
        // top: 328px;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      &>p {
        position: absolute;
        // top: 424px;
        top: 42.4%;
        left: 50%;
        // margin: 0 auto;
        transform: translateX(-50%);
        // width:926px;
        width: 48.23%;
        // height:108px;
        height: 10.8%;
        line-height: 27px;
        font-size:0.9378vw;
        font-family:Normal;
        font-weight:400;
        color:rgba(254,254,254,1);
        text-indent: 2em;
        letter-spacing:0.8px;
        opacity: 0;
      }
      &>a{
        position: absolute;
        top: 970px; 
        left: 50%;
        transform: translateX(-50%);
        width: 7.8%;
        height: 4.5%;
        cursor: pointer;
        &>img{
        width: 100%;
        height: 100%;
        }
        &>span {
          position: absolute;
          left:50%;
          top:24.44%;
          transform: translateX(-50%);
          width:49.33%;
          height:40%;
          // line-height: 18px;z  
          // width:49.33%;
          // height:40%;
          // line-height: 40%;
          font-size:0.938vw;
          font-weight:400;
          color:rgba(254,254,254,1);
          letter-spacing:1px;
          white-space: nowrap;
        }
      }
    }
  }
  .section_4{
    width: 100%;
    height: 100%;
    position: relative;
    &>.seciton_4_content {
      width: 100%;
      height: 100%;
      &>.section_4_bgc{
        width: 68.49%;
        height:36.7%;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        &>img {
          width: 100%;
          height: 100%;
          opacity:0;
        }
        &>li{
          background: url('../img/home_page_4/icon-hongwaikuang.png') no-repeat center;
          background-size: contain;
          width: 8.84%;
          height: 34.33%;
          opacity:0;
          &>a {
            display: inline-block;
            width: 100%;
            &>span{
              position: absolute;
              left: 50%;
              transform: translate(-50%,-50%);
              top: 50%;
              font-size:1.875vw;
              font-weight:400;
              color:rgba(255,255,255,1);
              text-align: center;
            }
          }
        }
        &>li:hover {
          background:url('../img/home_page_4/icon-lankuang.png') no-repeat center;
          background-size: contain;
        }
        &>li:nth-child(2){
          width: 8.44%;
          position: absolute;
          left: 18.02%;
          top: 23.53%;
        }
        &>li:nth-child(3){
          width: 8.44%;
          position: absolute;
          left: 29.13%;
          top: 44.04%;
        }
        &>li:nth-child(4){
          width: 8.44%;
          position: absolute;
          left: 40.28%;
          top: 21.81%;
        }
        &>li:nth-child(5){
          width: 8.44%;
          position: absolute;
          left: 51.43%;
          top: 44.04%;
        }
        &>li:nth-child(6){
          width: 8.44%;
          position: absolute;
          left: 62.49%;
          top: 21.81%;
        }
         &>li:nth-child(7){
          width: 8.44%;
          position: absolute;
          left: 73.60%;
          top: 44.04%;
        }
        &>h3{
          width: 5.4%;
          font-size:0.938vw;
          font-family:Normal;
          font-weight:400;
          color:rgba(255,255,255,1);
          white-space: nowrap;
          opacity:0;
        }
        &>h3:nth-child(8){
          position: absolute;
          left: 19.47%;
          top: -94%;
        }
        &>h3:nth-child(9){
          position: absolute;
          left: 39.77%;
          top: -94%;
        }
        &>h3:nth-child(10){
          position: absolute;
          left: 63.88%;
          top: -94%;
        }
        &>h3:nth-child(11){
          position: absolute;
          left: 29.2%;
          bottom: -94%;
        }
        &>h3:nth-child(12){
          position: absolute;
          left: 52.76%;
          bottom: -94%;
        }
        &>h3:nth-child(13){
          position: absolute;
          left: 72.62%;
          bottom: -94%;
        }
      }
    }
  }
  .section_5{
    .seciton_5_content{
      position: relative;
      height: 100%;
      &>h1 {
        position: absolute;
        // left: 269px;
        left: 0%;
        // margin-left: -35.99%;
        margin-left: -31.2%;
        // top: 270px;
        top:30.9%;
        width:147px;
        height:34px;

        line-height: 34px;
        // font-size:36px;
        font-size: 1.875vw;
        font-family:Medium;
        font-weight:500;
        color:rgba(255,255,255,1);
      }
      &>img:nth-child(2) {
        position: absolute;
        left: 0%;
        margin-left: -31.2%;
        top: 36.3%;
      }
      &>div {
        position: absolute;
        left: 0%;
        margin-left: -31.2%;
        top: 40.4%;
        width: 26.25%;
        height: 19.7%;
        line-height: 28.14px;
        font-size: 0.937vw;
        font-family:Normal;
        font-weight:400;
        color:rgba(255,255,255,1);
        letter-spacing:0.6px;
        text-align: left;
      }
      &>a {
        position: absolute;
        left: 0%;
        margin-left: -31.2%;
        top:70.5%;
        width: 7.81%;
        height:4.5%; 
        cursor: pointer;
        &>img {
          width: 100%;
          height:100%; 
        }
        &>span{
          position: absolute;
          left: 50%;
          top: 24.44%;
          transform: translateX(-50%);
          text-align: center;
          width:49.33%;
          height:40%;
          // line-height: 18px;
          // font-size:18px;
          font-size:0.94vw;
          font-weight:400;
          color:rgba(254,254,254,1);
        }
      }
      &>img:nth-child(5) {
        width:26.04%;
        // height: 50%;
        position: absolute;
        // left: 988px;
        left: 50%;
        margin-left: 5.46%;
        // top:280px;
        top:28%;
        
        animation:earth_05 50s linear infinite;
      }
      @keyframes earth_05{
        0%{
          transform: rotate(0deg);
        }
        25%{
          transform: rotate(90deg);
        }
        50%{
          transform: rotate(180deg);
        }
        75%{
          transform: rotate(270deg);
        }
        100%{
          transform: rotate(360deg);
        }
      }
    }
  }
  .section_6{
      width: 100%;
      height: 100%;
    .seciton_6_content{
      width: 100%;
      height: 100%;
      position: relative;
      &>div>img:hover{
        cursor: pointer;
        transform: scale(1.4);
        transition: all 0.6s
      }
      &>h1{
        position: absolute;
        left: 100%;
        top: 22.4%;
        width: 7.66%;
        height: 3.15%;
        line-height: 34px;
        font-size:1.875vw;
        font-family:Medium;
        font-weight:500;
        color:rgba(255,255,255,1);
      }
      &>img:nth-child(2){
        position: absolute;
        top: 27.9%;
        left: 100%;
        width: 26.25%;
      }
      &>p{
        position: absolute;
        left: 100%;
        top: 32%;
        // width: 504px;
        // height: 107px;
        width: 26.25%;
        height: 10.7%;
        line-height: 26.75px;
        // font-size:18px;
        font-size: 0.938vw;
        font-family:Normal;
        font-weight:400;
        color:rgba(255,255,255,1);
        letter-spacing:0.6px;
      }
      &>div{
        &>span{
          position: absolute;
          left: 0;
          top: 139px;
          font-size:24px;
          font-family:Normal;
          font-weight:400;
          color:rgba(255,255,255,1);
          text-align: center;
          white-space: nowrap;
        }
      }
      &>.section_icon_01{
        position: absolute;
        // left: 14.74%;
        // top: 58.7%;
        left:32.74%;
        top: 100%;
      }
      &>.section_icon_02{
        position: absolute;
        // left: 26.88%;
        // top: 48.7%;
        left: 32.88%;
        top: 100%;
      }
      &>.section_icon_03{
        position: absolute;
        // left: 38.65%;
        // top: 41.4%;
        left: 32.65%;
        top: 100%;
      }
      &>.section_icon_04{
        position: absolute;
        // left: 50.52%;
        // top:51.7%;
        left: 32.52%;
        top: 100%;
        &>span{
          left: -61px;
        }
      }
      .section_icon{
        height: 14%;
        text-align: center;
        &>img {
          width: 80%;
        }
        &>span {
          position: absolute;
          left: 50%;
          top: 87.43%;
          transform: translatex(-50%);
          font-size: 0.938vw;
        }
      }
    }
  }
  .section_7{
    background:url('../img/home_page_7/lianxiwomen-ditu01.gif') no-repeat center;
    background-size:contain;
    width: 100%;
    height: 100%;
    .seciton_7_content {
      position: relative;
      width:100%;
      height: 100%;
      .section_7_site{
        width: 19.79%;
        height: 38%;
        background:url("../img/home_page_7/icon-dizhikuang.png") no-repeat center;
        background-size: contain;
        position: absolute;
        left: 40.1%;
        top: 25.9%;
        &>img{
          position: absolute;
          left: 50%;
          top: 21.84%;
          transform: translate(-50%);
          width:7.73%;
          height: 10.53%;
        }
        &>h2{
          position: absolute;
          left: 50%;
          transform: translate(-50%);
          top: 40.26%;
          width: 32.37%;
          height: 7.37%;
          line-height: 28px;
          font-size:1.562vw;
          font-family:Medium;
          font-weight:500;
          color:rgba(255,255,255,1);
        }
        &>p{
          position: absolute;
          left: 50%;
          transform: translate(-50%);
          top: 60.26%;
          // width:206px;
          // height:39px;
          width: 54.21%;
          height: 12.63%;
          // line-height: 30px;
          line-height: 164.9%;
          font-size: 0.938vw;
          font-family:Medium;
          font-weight:500;
          color:rgba(255,255,255,1);
          // letter-spacing: 0.7px;
        }
      }      
    }
    .footer_content {
        width: 100%;
        background-color:#01011E;
        position: absolute;
        bottom: 0px;
        left: 0;
        height: 15%;
        &>.footer_menu{
          // width: 1200px;
          // height: 107px;
          width: 62.5%;
          height: 70%;
          border-bottom: 1px solid #1B1B1B;
          margin: 0 auto;
          &>li {
            float: left;
            // margin-left: 251px;
            margin-left: 20.8%;
            // width: 112px;
            width:9.33%;
            height: 100%;
            &>h1 {
              width:73px;
              height:17px;
              line-height: 17px;
              // font-size:18px;
              font-size: 0.938vw;
              font-family:Medium;
              font-weight:500;
              color:rgba(255,255,255,1);
              // margin-top: 27px;
              margin-top: 25.23%;
              // margin-bottom: 17px;
              margin-bottom: 15.89%;
              white-space: nowrap;
            }
            &>p {
              // width:106px;
              // height:12px;
              height:10.7%;
              width: 100%;
              line-height: 12px;
              // font-size:12px;
              font-size: 0.652vw;
              font-family:ArialMT;
              font-weight:400;
              color:rgba(255,255,255,1);
              white-space: nowrap;
            }
          }
          &>li:nth-child(1) {
            margin-left: 0;
          }
        }
        &>.footer_copyright {
          // 150
          height: 29.33%;
          width: 100%;
          &>p{
            width:370px;
            height:14px;
            line-height: 14px;
            font-size:0.625vw;
            font-family:Medium;
            font-weight:500;
            color:rgba(255,255,255,1);
            margin: 0.9% auto 1.8%;
          }
        }
      }
  }
</style>  